<template>
  <view>
    <view class="">
      <image src="../static/image/pagesMine/warn.png" mode="" style="width: 48rpx; height: 48rpx; margin-left: 352rpx;">
      </image>
    </view>
    <view class="logOutTop">
      将{{ maskPhoneNumber(phoneNumber) }}绑定的账号注销注销后一下信息将会被清空且无法找回
    </view>
    <view class="logOutlist">
      <view class="">·接单信息</view>
      <view class="">·账户余额</view>
      <view class="">·个人信息</view>
    </view>
    <button
      style="width: 684rpx; color: #fff; background: #D12C25; margin-top: 100rpx; position: fixed; bottom: 30rpx; left: 38rpx;"
      @tap="logOut">确认注销</button>
    <!-- 	<u-popup v-model="show" mode="center" :closeable='true' style="border-radius: 28rpx;">
			<view style="width: 536rpx; height: 336rpx;">
				<view style="margin-top: 100rpx; padding: 0 20rpx;">注销账号会清空所有信息和数据，是否确认注销</view>
				<button style="width: 300rpx; color: #fff; background: #D12C25; margin-top: 100rpx;"
					@tap="confirmLogout">确认</button>
			</view>
		</u-popup> -->
    <u-modal v-model="show" :show-title='false' :show-confirm-button='false'>
      <view style="width: 536rpx; height: 336rpx; position: relative;">
        <view style="margin-top: 100rpx; margin-left:100rpx ;">注销账号会清空所有信息和数据，是否确认注销?</view>
        <div @tap="confirmLogout"
          style="width: 304rpx; height:64rpx; color: #fff; background: #D12C25; margin: 100rpx 150rpx 0; text-align:center; line-height:64rpx; border-radius:12rpx;">
          <text>确认</text>
        </div>
      </view>
      <view class=""
        style=" width: 536rpx; color: #D12C25; height: 50rpx; position: fixed; bottom: 355rpx; left: 350rpx;">
        <image style="width: 48rpx; height: 48rpx;" src="../static/image/pagesMine/gram.png" mode="" @tap="ShutDown">
        </image>
      </view>
    </u-modal>

  </view>
</template>

<script>
import { logout,selectUser } from '@/api/main'
export default {
	data() {
		return {
			phoneNumber: "",
			show: false,
		}
	},
	onLoad(option) {
		console.log('注销信息', option.info)
		this.getiphone()
		// this.phoneNumber = option.info
	},
	methods: {
		logOut() {
			this.show = true
		},
		getiphone(){
			selectUser().then(res=>{
				console.log('用户信息',res)
				this.phoneNumber = res.data.phone
			})
		},
		//确认注销
		confirmLogout() {
			// let token=uni.getStorageSync('token')
			// let obj={
			// 	token:token
			// }
			logout().then(res=>{
				console.log('注销',res)
				this.show = false,
				uni.removeStorageSync('token')
				uni.removeStorageSync('latAndLong')
          		uni.removeStorageSync('address')
				uni.removeStorageSync('consigneeId')
				uni.reLaunch({
					url:'/pages/login/login'
				})
			})
			// uni.redirectTo({
			// 	url:'/pages/login/login'
			// })
		},
		//关闭按钮
		ShutDown(){
			this.show = false
		},
		//手机号中间4位用*代替
		maskPhoneNumber(phoneNumber) {
			// 检查手机号是否有效  
			if (!phoneNumber || phoneNumber.length < 11) {
				return phoneNumber;
			}
			// 替换中间4位为*  
			return `${phoneNumber.slice(0, 3)}****${phoneNumber.slice(7)}`;
		}
	}
}
</script>

<style scoped lang="scss">
.logOutTop {
  width: 684rpx;
  margin: 50rpx;
  font-size: 28rpx
}

.logOutlist {
  display: flex;
  flex-direction: column;
  width: 624rpx;
  height: 268rpx;
  background: #F1F1F1;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  justify-content: space-between;
  margin-left: 64rpx;
  padding: 32rpx;
}
</style>